import { ref, computed } from "vue";
import { useElementSize, useResizeObserver } from "@vueuse/core";

// const

/** 使用 任务详情标题的布局工具
 * @deprecated
 * 设计混乱 不使用该工具 打算自己直接在业务组件内使用 不额外增设此工具
 */
export function useTaskInfoTitleLayout() {
  /**
   * 任务标题组件的高度
   * @description
   * 多个组件共享公用的 单例数据
   */
  const taskInfoTitleHeight = ref(0);

  /**
   * <el-tabs> 组件的标题栏高度
   * @description
   * 多个组件共享公用的 单例数据
   */
  const elTabsHeaderHeight = ref(0);

  const titleH = computed(() => taskInfoTitleHeight.value || 0);

  /**
   * 设置 任务标题 元素的高度
   * @param { HTMLElement } dom
   */
  function setTitleH(dom) {
    console.log(" ? dom ", dom);

    // useResizeObserver

    const { width, height } = useElementSize(dom);

    console.log(" ? useElementSize ", height.value);

    taskInfoTitleHeight.value = height.value;
  }

  return {
    taskInfoTitleHeight,
    elTabsHeaderHeight,

    titleH,

    setTitleH,
  };
}
